<!DOCTYPE html>
<!-- 【核心修复】将 th:fragment 移至 <html> 标签，并接收 title 和 content 参数 -->
<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org" th:fragment="layout(title, content)">
<head>
    <meta charset="UTF-8">
    <!-- 【核心修复】使用 th:replace 替换 title，使其能接收来自内容页的标题 -->
    <title th:replace="${title}">SnackMQ Console</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/css/console-custom.css">
    <!-- 引入 Bootstrap Icons -->
    <link rel="stylesheet" href="/css/bootstrap/bootstrap-icons.min.css">
</head>
<body class="main-gradient-bg">

<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="/">SnackMQ Console</a>
    <div class="navbar-nav flex-row ms-auto me-3">
        <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-globe"></i>
                <!-- 显示当前语言的反向选项 -->
                <span th:if="${#locale.language == 'zh'}">&nbsp;&nbsp;English</span>
                <span th:if="${#locale.language == 'en'}">&nbsp;&nbsp;中文</span>
                <span th:if="${#locale.language != 'zh' and #locale.language != 'en'}">🌐 Switch Language</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
                <!-- 只显示一个切换选项 -->
                <li th:if="${#locale.language == 'zh'}">
                    <a class="dropdown-item" href="?lang=en">
                        Switch to English
                    </a>
                </li>
                <li th:if="${#locale.language == 'en'}">
                    <a class="dropdown-item" href="?lang=zh">
                        切换到中文
                    </a>
                </li>
                <!-- 默认情况下显示两个选项 -->
                <li th:if="${#locale.language != 'zh' and #locale.language != 'en'}">
                    <a class="dropdown-item" href="?lang=zh">
                        中文
                    </a>
                </li>
                <li th:if="${#locale.language != 'zh' and #locale.language != 'en'}">
                    <a class="dropdown-item" href="?lang=en">
                        English
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky">
                <!-- Snack MQ -->
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
                    <span th:text="#{nav.functional.area}">Functional Area</span>
                </h6>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI() == '/' ? 'active' : ''}" href="/">
                            <i class="bi bi-house-door me-2"></i><span th:text="#{nav.dashboard}">Dashboard</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/brokers') ? 'active' : ''}" href="/brokers">
                            <i class="bi bi-hdd-network me-2"></i><span th:text="#{nav.brokers}">Brokers</span>
                        </a>
                    </li>
                    <!-- 【新增】 -->
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/topics') ? 'active' : ''}" href="/topics">
                            <i class="bi bi-collection me-2"></i><span th:text="#{nav.topics}">Topics</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/groups') ? 'active' : ''}" href="/groups">
                            <i class="bi bi-people me-2"></i><span th:text="#{nav.groups}">Consumer Groups</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/exchanges') ? 'active' : ''}" href="/exchanges">
                            <i class="bi bi-diagram-3 me-2"></i><span th:text="#{nav.exchanges}">Exchanges</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/permissions') ? 'active' : ''}" href="/permissions">
                            <i class="bi bi-shield-lock me-2"></i><span th:text="#{nav.permissions}">Permissions</span>
                        </a>
                    </li>
                    <!-- 【新增】 -->
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/tools') ? 'active' : ''}" href="/tools">
                            <i class="bi bi-tools me-2"></i><span th:text="#{nav.tools}">Tools</span>
                        </a>
                    </li>
                </ul>

                <!-- 【新增】退出功能 -->
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-1 mb-1 text-muted text-uppercase">
                    <span th:text="#{nav.account}">Account</span>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <form th:action="@{/logout}" method="post" class="m-0 p-0">
                            <button type="submit"
                                    class="nav-link w-100 text-start border-0 bg-transparent logout-link"
                                    style="cursor:pointer;">
                                <i class="bi bi-box-arrow-right me-2"></i><span th:text="#{common.logout}">Logout</span>
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
            <div class="content-card">
                <!-- ... 现有的 successMessage 和 errorMessage 的 div ... -->
                <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
                    <span th:text="${errorMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <!-- 【新增】用于显示非错误类的提示信息 -->
                <div th:if="${infoMessage}" class="alert alert-info alert-dismissible fade show" role="alert">
                    <span th:text="${infoMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
                    <span th:text="${errorMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <!-- 【核心修复】移除外层的 div，直接使用 th:replace 插入内容页的 content -->
                <div th:replace="${content}">
                    <!-- Page content will be inserted here -->
                </div>
            </div>
        </main>
    </div>
</div>

<!-- 【新增】Bootstrap JS Bundle for Modals, etc. -->
<script src="/js/bootstrap/bootstrap.bundle.min.js"></script>
<!-- 【新增】语言切换下拉菜单修复 -->
<script src="/js/language-dropdown-fix.js"></script>

</body>
</html>